const btn = document.querySelector('button')
let cube = true
btn.addEventListener('click', function () {
  let cards = document.querySelectorAll('.box div')
  let box = document.querySelector('.box')
  if (cube) {

    cards.forEach(item => {
      item.classList.toggle('card')
    })
    box.classList.toggle('container')
    cube = false
  } else {
    // box.style.transformStyle = ''
    // box.style.transform = ''
    // box.style = 'display:flex;'
    // cards.forEach(item => {
    //   item.style.transform = ''
    // })
    cards.forEach(item => {
      item.classList.toggle('card')
    })
    box.classList.toggle('container')
    cube = true
  }
})


window.onload = function () {
  btn.click()
  let oBox = document.querySelector('.box')
  let y = -60
  let x = 45
  oBox.onmousedown = function (ev) {
    let oEvent = ev || event
    let disX = oEvent.clientX - y
    let disY = oEvent.clientY - x
    document.onmousemove = function (ev) {
      let oEvent = ev || event
      x = oEvent.clientY - disY
      y = oEvent.clientX - disX
      oBox.style.transform =
        'perspective(800px) rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
    return false
  }
}